<template>
  <el-drawer
    class="dia-style  post-drawer"
    :title="title"
    :visible.sync="open"
    width="60%"
    :close-on-click-modal="false"
    size="50%"
    :wrapper-closable="false"
    @close="cancel">
    <div class="drawer-container">
      <hk-form
        ref="formRef"
        class="hk-flex"
        :data="formData"
        :rules="rules"
        :label-width="labelWidth"
        :btn-hidden="btnHidden"
        :dict-list="dictList"
        :form-labels="formLabels"
        :disabled="title == '详情'">
        <template #filter-products>
          <el-button v-if="title !== '详情'" icon="el-icon-thumb" style="margin-right: 20px" @click="handleSelectData"
            >请选择</el-button
          >
          <span v-if="!formData.products.length && title == '详情'">暂无数据</span>
          <hk-table
            v-if="formData.products.length"
            :table-data="formData.products"
            :table-columns="tableList"
            :show-index="true"
            :dict-list="dictList"
            :show-pag="false"
            :table-height="80" />
        </template>
      </hk-form>
      <SelectDialog
        ref="selectRef"
        :table-columns="tableList"
        :page-function="productList"
        title="选择涉密系统"
        :check-data="formData.products"
        :show-pag="false"
        identifier="productId"
        :dict-list="dictList"
        is-multiple
        @handleSubmit="dialogSubmitEvent" />
    </div>
    <div class="drawer-footer">
      <el-button v-if="title !== '详情'" type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { details, add, update, products } from '@/api/specialProject/post'
import HkForm from '@/components/Hk-Form'

import HkTable from '@/components/Hk-Table/index.vue'

import SelectDialog from '@/components/SelectDialog/index.vue'
export default {
  components: { HkForm, SelectDialog, HkTable },
  props: {
    title: {
      type: String,
      default: '新增',
    },
    dictList: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: '120',
      // 是否显示按钮
      btnHidden: true,
      formData: { products: [] },
      total: 0,
      loading: false,
      tableList: [
        { label: '涉密系统名称', param: 'productName' },
        { label: '密级', param: 'productSecLevel', type: 'dict', list: 'secLevelList' },
        { label: '类型', param: 'productType' },
      ],
      queryParams: {},
      formLabels: [
        {
          label: '岗位名称',
          field: 'postName',
          type: 'input',
          maxlength: 100,
          span: 24,
        },

        {
          label: '等级',
          field: 'secLevel',
          type: 'select',
          list: 'secLevelList',

          span: 24,
        },
        {
          label: '岗位职责',
          field: 'postDuty',
          type: 'textarea',
          hidden: false,
          attrs: {
            rows: '3',
          },
          maxlength: 256,
          span: 24,
        },
        {
          label: '对应涉密系统',
          field: 'products',
          type: 'slot',
          span: 24,
        },
      ],
      // 表单校验
      rules: {
        postName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
        secLevel: [{ required: true, message: '等级不能为空', trigger: 'change' }],
        postDuty: [{ required: true, message: '岗位职责不能为空', trigger: 'blur' }],
        products: [{ required: true, message: '对应涉密系统不能为空', trigger: 'change' }],
      },
    }
  },

  mounted() {},
  methods: {
    show(data) {
      if (data) {
        details(data).then((res) => {
          this.formData = res
        })
      }
      this.open = true
    },
    getDataList(val) {
      this.queryParams = { ...this.queryParams, ...val }
    },
    handleSelectData() {
      this.$refs.selectRef.show(this.formData.products)
    },
    productList(queryParams) {
      return products(queryParams)
    },
    dialogSubmitEvent(data) {
      this.formData.products = []
      this.$nextTick(() => {
        this.formData.products = data
      })
    },
    submitForm() {
      this.$refs.formRef.handleFormSubmit('formLabels').then((res) => {
        res.productIds = res.products.map((i) => i.productId)
        const { postName, secLevel, postDuty, id, productIds } = res
        const query = { postName, secLevel, postDuty, id, productIds }
        if (this.title == '新增') {
          add(query).then(() => {
            this.$message.success('新增成功')
            this.$emit('handleSubmit')
            this.cancel()
          })
        } else {
          update(query).then(() => {
            this.$message.success('修改成功')
            this.$emit('handleSubmit')
            this.cancel()
          })
        }
      })
    },

    // 取消按钮
    cancel() {
      this.open = false
      this.$refs.formRef.resetForm('formLabels')
    },
  },
}
</script>

    <style lang="scss" scoped>
::v-deep .el-table__body-wrapper {
  height: auto;
}
.el-drawer__body {
  overflow: hidden;
}
#app.dark-theme {
  span {
    color: #fff !important;
  }

}

.sub-title {
  height: 20px;
  border-left: 2px solid #4b6eef;
  margin-bottom: 22px;

  span {
    margin-left: 8px;
  }
}

.ml10 {
  margin-left: 10px;
}

.mt40 {
  margin-top: 40px;
}
.drawer-container {
  padding: 0;
}
</style>

